<script setup lang="tsx">
import { ref } from 'vue';
import { NButton, NCard, NSpace, NInput, NSelect, NTag } from 'naive-ui';
import { useAuth } from '@/hooks/business/auth';
import { $t } from '@/locales';

defineOptions({
  name: 'OutboundTest'
});

const { hasAuth } = useAuth();

const testData = ref({
  status: 'ready',
  message: '测试页面准备就绪'
});

const statusOptions = [
  { label: '准备就绪', value: 'ready' },
  { label: '测试中', value: 'testing' },
  { label: '测试完成', value: 'completed' },
  { label: '测试失败', value: 'failed' }
];

function handleTest() {
  testData.value.status = 'testing';
  testData.value.message = '正在执行测试...';

  // 模拟测试过程
  setTimeout(() => {
    testData.value.status = 'completed';
    testData.value.message = '测试完成，所有功能正常';
  }, 2000);
}

function handleReset() {
  testData.value.status = 'ready';
  testData.value.message = '测试页面已重置';
}
</script>

<template>
  <div class="min-h-500px flex-col-stretch gap-16px overflow-hidden lt-sm:overflow-auto">
    <NCard title="外呼模块测试" :bordered="false" size="small" class="card-wrapper sm:flex-1-hidden">
      <div class="min-h-400px flex-center flex-col gap-16px">
        <div class="text-center">
          <h3 class="text-20px font-medium mb-8px">外呼模块功能测试</h3>
          <p class="text-14px text-gray-500">这是一个用于测试外呼模块功能的页面</p>
        </div>

        <div class="flex-center gap-16px">
          <NTag :type="testData.status === 'ready' ? 'default' : testData.status === 'testing' ? 'info' : testData.status === 'completed' ? 'success' : 'error'">
            {{ testData.status === 'ready' ? '准备就绪' : testData.status === 'testing' ? '测试中' : testData.status === 'completed' ? '测试完成' : '测试失败' }}
          </NTag>
        </div>

        <div class="text-center max-w-400px">
          <p class="text-14px text-gray-600">{{ testData.message }}</p>
        </div>

        <div class="flex-center gap-12px">
          <NButton
            type="primary"
            :loading="testData.status === 'testing'"
            @click="handleTest"
          >
            执行测试
          </NButton>
          <NButton
            type="default"
            @click="handleReset"
          >
            重置状态
          </NButton>
        </div>
      </div>
    </NCard>
  </div>
</template>

<style scoped>
.card-wrapper {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  transition: all 0.3s ease;
}

.card-wrapper:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.flex-col {
  flex-direction: column;
}

.gap-12px {
  gap: 12px;
}

.gap-16px {
  gap: 16px;
}

.mb-8px {
  margin-bottom: 8px;
}

.text-14px {
  font-size: 14px;
}

.text-20px {
  font-size: 20px;
}

.text-gray-500 {
  color: #6b7280;
}

.text-gray-600 {
  color: #4b5563;
}

.font-medium {
  font-weight: 500;
}

.text-center {
  text-align: center;
}

.max-w-400px {
  max-width: 400px;
}

.min-h-400px {
  min-height: 400px;
}
</style>
